import React, { useState } from 'react';
import { Card, Col, Row, Button, Modal, Input } from 'antd';
import './App.css';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="App">
      <Row align="middle" justify="center">
        <Button type="primary" style={{ marginBottom: 20 }} onClick={()=>{
          setIsModalOpen(true);
        }}>切换区域</Button>
      </Row>
      <Row gutter={16}>
        <Col span={8} className='mycard'>
          <Card title="城市扫二维码总人数" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            39
          </Card>
        </Col>
        <Col span={8} center>
          <Card title="城市参与游戏总人数（身份验证答是，并全程完成问答的门店总数）" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            45
          </Card>
        </Col>
        <Col span={8}>
          <Card title="城市未参与游戏总人数（身份验证有答否或未完成全程问答的门店总数" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            112
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={8} className='mycard'>
          <Card title="城市参与快问快答的门店客户代码编号，手机号码（仅限上海）" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            222
          </Card>
        </Col>
        <Col span={8}>
          <Card title="城市点击观看3个新品知识点的门店总数" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            4444
          </Card>
        </Col>
        <Col span={8}>
          <Card title="城市每家门店每题回答的答案结果" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            34
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={8} className='mycard'>
          <Card title="城市4道问题全答对门店总数（第四题设置必填，只要填写就算对）" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            32
          </Card>
        </Col>
        <Col span={8}>
          <Card title="城市4道问题答错门店总数" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            123
          </Card>
        </Col>
        <Col span={8}>
          <Card title="城市每道问题正确率" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            456
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={8} className='mycard'>
          <Card title="城市每家门店答题所需花费时间" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            98
          </Card>
        </Col>
        <Col span={8} className='mycard'>
          <Card title="数据导出" bordered={true} hoverable={true} size="default" bodyStyle={{ height: 100 }}>
            点击导出表格
          </Card>
        </Col>
      </Row>


      <Modal title="切换城市" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Input placeholder="请输入城市拼音" />
      </Modal>

    </div>
  );
}

export default App;
